<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="../css/common.css">
	<link rel="stylesheet" href="../css/swiper-3.3.1.min.css">
	<title>首页</title>
	<style>
		.lunbo{
			width: 90%;
			height: 10rem;
			margin: 1rem auto;
		}
		.swiper-container {
			width: 100%;
			height: 100%;
			margin-left: auto;
			margin-right: auto;
		}
		.lunbo .swiper-slide img{
			border-radius: 0.5rem;
			width: 100%;
			height: 100%;
		}
		.homeBox{
			padding: 1rem;
		}
		.peixun{
			display: flex;
			margin-bottom: .5rem;
		}
		.pxType{
			width: 25%;
			text-align: center;
		}
		.pxType img{
			width: 2.5rem;
			height: 2.5rem;
		}
		.pxName{
			color: #666;
		}
		.guanggao img{
			width: 100%;
			border-radius: 8px;
		}
		.classBox{
			margin: 1rem 0;
		}
		.classTitle{
			margin-bottom: 1rem;
		}
		.hotClass{
			font-size: 1.125rem;
			font-weight: bold;
			float: left;
		}
		.classMore{
			float: right;
		}
		.classMore span {
			font-size: 0.75rem;
			color: #888;
			float: left;
			line-height: 1.6875rem;
			margin-right: .3rem;
		}
		.classMore img{
			float: right;
			width: 0.5rem;
			height: 1rem;
			margin-top: .4rem;
		}
		.classInfor{
			width: 46%;
			float: left;
			margin-right: 8%;
			margin-bottom: 1rem;
		}
		.classInfor:nth-of-type(2n){
			margin-right: 0;
		}
		.classLeft{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 1rem .5rem;
			box-sizing: border-box;
			font-size: 0.75rem;
		}
		.classIntro{
			width: 100%;
		}
		.className{
			color: #fff;
			font-weight: bold;
		}
		.fudao{
			color: #ddd;
		}
		.classLeft img{
			width: 1.4rem;
		}
		.classBtm{
			padding-top: 1rem;
		}
		.kecheng{
			font-size: 0.875rem;
			color: #666;
			margin-bottom: .3rem;
		}
		.classBtm img{
			height: 1rem;
		}
		.classBtm span{
			font-weight: bold;
			margin-left: .3rem;
		}
		.paihang img{
			width: 3rem;
			height: 3rem;
			border-radius: 3rem;
			float: left;
		}
		.phName{
			float: left;
			margin-left: 1rem;
			line-height: 3rem;
			color: #666;
		}
		.phMoney{
			float: right;
			color: #FF0000;
			line-height: 3rem;
		}
		.paihang{
			padding: 1rem 0;
			border-bottom: 1px solid #E4E4E4;
		}
		.otherList{
			padding: .5rem;
			box-sizing: border-box;
			box-shadow: 0px 2px 10px rgba(204, 204, 204, 0.349019607843137);
			margin-bottom: 1rem;
			display: flex;
		}
		.o_img{
			width: 6rem;
			height: 6rem;
			border-radius: 4px;
			float: left;
		}
		.otherIntro{
			float: left;
			min-width: 41%;
			margin-left: .5rem;
		}
		.o_name{
			margin-top: 1rem;
			margin-bottom: 1rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.o_study{
			color: #888;
		}
		.otherPrice{
			float: right;
			font-weight: bold;
			width: 100%;
		}
		.otherPrice img{
			width: 1rem;
			margin-right: .3rem;
		}
		.p_state{
			margin: 1rem 0;
			color: #007AFF;
		}
		.shareLogo{
			position: fixed;
			right: 0;
			bottom: 8rem;
			width: 25%;
			background-color: #ff6666;
			border-top-left-radius: 3rem;
			border-bottom-left-radius: 3rem;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1.2;
			padding: .3rem 0;
		}
		.shareLogo img{
			width: 1rem;
		}
		.shareBox{
			margin-left: .3rem;
			font-size: 0.75rem;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="tabsBox">
		<div class="topTab">
			<div class="tabLeft">首页</div>
		</div>
	</div>
	<!-- 轮播图 -->
	<div class="lunbo">
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="../assets/bac.png" ></div>
				<div class="swiper-slide"><img src="../assets/meinv.png" ></div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
	</div>
	<div class="homeBox">
		<div class="peixun">
			<div class="pxType">
				<a href="../html/px_type.html">
					<img src="../assets/share.png" >
					<div class="pxName">抖音培训</div>
				</a>
			</div>
			<div class="pxType">
				<a href="../html/px_type.html">
					<img src="../assets/share.png" >
					<div class="pxName">快手</div>
				</a>
			</div>
			<div class="pxType">
				<a href="../html/px_type.html">
					<img src="../assets/share.png" >
					<div class="pxName">运营培训</div>
				</a>
			</div>
			<div class="pxType">
				<a href="../html/px_type.html">
					<img src="../assets/share.png" >
					<div class="pxName">更多课程</div>
				</a>
			</div>
		</div>
		<div class="guanggao">
			<img src="../assets/bac.png" >
		</div>
		<div class="classBox">
			<div class="classTitle cleardrift">
				<div class="hotClass">热门课程</div>
				<div class="classMore">
					<a href="../html/px_type.html">
					<span>更多</span>
					<img src="../assets/7.png" >
					</a>
				</div>
			</div>
			<div class="classInforBox cleardrift">
				<div class="classInfor">
					<div class="classLeft pur">
						<div class="classIntro">
							<div class="className">抖音100W粉丝</div>
							<div class="fudao">外教一对一辅导</div>
						</div>
						<img src="../assets/add.png" >
					</div>
					<div class="classBtm">
						<div class="kecheng">增长粉丝课程</div>
						<img src="../assets/wallet.png" ><span>¥2999.00</span>
					</div>
				</div>
				<div class="classInfor">
					<div class="classLeft pur">
						<div class="classIntro">
							<div class="className">抖音100W粉丝</div>
							<div class="fudao">外教一对一辅导</div>
						</div>
						<img src="../assets/add.png" >
					</div>
					<div class="classBtm">
						<div class="kecheng">增长粉丝课程</div>
						<img src="../assets/wallet.png" ><span>¥2999.00</span>
					</div>
				</div>
				<div class="classInfor">
					<div class="classLeft pur">
						<div class="classIntro">
							<div class="className">抖音100W粉丝</div>
							<div class="fudao">外教一对一辅导</div>
						</div>
						<img src="../assets/add.png" >
					</div>
					<div class="classBtm">
						<div class="kecheng">增长粉丝课程</div>
						<img src="../assets/wallet.png" ><span>¥2999.00</span>
					</div>
				</div>
				<div class="classInfor">
					<div class="classLeft pur">
						<div class="classIntro">
							<div class="className">抖音100W粉丝</div>
							<div class="fudao">外教一对一辅导</div>
						</div>
						<img src="../assets/add.png" >
					</div>
					<div class="classBtm">
						<div class="kecheng">增长粉丝课程</div>
						<img src="../assets/wallet.png" ><span>¥2999.00</span>
					</div>
				</div>
			</div>
		</div>
		<div class="classBox">
			<div class="classTitle cleardrift">
				<div class="hotClass">收益排行榜</div>
				<div class="classMore">
					<a href="../html/ranking.html">
						<span>更多</span>
						<img src="../assets/7.png" >
					</a>
				</div>
			</div>
			<div class="profitBox cleardrift">
				<div class="paihang cleardrift">
					<img src="../assets/meinv.png" >
					<div class="phName">auoomqd</div>
					<div class="phMoney">¥ 12312.00元</div>
				</div>
			</div>
			<div class="profitBox cleardrift">
				<div class="paihang cleardrift">
					<img src="../assets/meinv.png" >
					<div class="phName">auoomqd</div>
					<div class="phMoney">¥ 12312.00元</div>
				</div>
			</div>
			<div class="profitBox cleardrift">
				<div class="paihang cleardrift">
					<img src="../assets/meinv.png" >
					<div class="phName">auoomqd</div>
					<div class="phMoney">¥ 12312.00元</div>
				</div>
			</div>
		</div>
		<div class="classBox">
			<div class="classTitle cleardrift">
				<div class="hotClass">抖音课程</div>
				<div class="classMore">
					<a href="../html/px_type.html">
					<span>更多</span>
					<img src="../assets/7.png" >
					</a>
				</div>
			</div>
			<div class="otherBox">
				<div class="otherList cleardrift">
					<img src="../assets/bac.png" class="o_img">
					<div class="otherIntro">
						<div class="o_name">抖音变现课程</div>
						<div class="o_study">1.9w已学习</div>
					</div>
					<div class="otherPrice">
						<div class="p_state">课程报名中</div>
						<div class="p_price">
							<img src="../assets/wallet.png" >¥1599.00
						</div>
					</div>
				</div>
				<div class="otherList cleardrift">
					<img src="../assets/bac.png" class="o_img">
					<div class="otherIntro">
						<div class="o_name">抖音变现课程</div>
						<div class="o_study">1.9w已学习</div>
					</div>
					<div class="otherPrice">
						<div class="p_state">课程报名中</div>
						<div class="p_price">
							<img src="../assets/wallet.png" >¥1599.00
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="classBox">
			<div class="classTitle cleardrift">
				<div class="hotClass">运营课程</div>
				<div class="classMore">
					<a href="../html/px_type.html">
					<span>更多</span>
					<img src="../assets/7.png" >
					</a>
				</div>
			</div>
			<div class="otherBox">
				<div class="otherList cleardrift">
					<img src="../assets/bac.png" class="o_img">
					<div class="otherIntro">
						<div class="o_name">抖音变现课程</div>
						<div class="o_study">1.9w已学习</div>
					</div>
					<div class="otherPrice">
						<div class="p_state">课程报名中</div>
						<div class="p_price">
							<img src="../assets/wallet.png" >¥1599.00
						</div>
					</div>
				</div>
				<div class="otherList cleardrift">
					<img src="../assets/bac.png" class="o_img">
					<div class="otherIntro">
						<div class="o_name">抖音变现课程</div>
						<div class="o_study">1.9w已学习</div>
					</div>
					<div class="otherPrice">
						<div class="p_state">课程报名中</div>
						<div class="p_price">
							<img src="../assets/wallet.png" >¥1599.00
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="btmLogoBox">
		<div class="btmLogo">
		<div class="btmlogoList">
			<a href="../html/index.html">
				<img src="../assets/btm11.png" >
				<div class="btmLogoName">首页</div>
			</a>
		</div>
		<div class="btmlogoList">
			<a href="../html/douyin.html">
				<img src="../assets/btm2.png" >
				<div class="btmLogoName">抖音变现</div>
			</a>
		</div>
		<div class="btmlogoList">
			<a href="../html/centerProfit.html">
				<img src="../assets/btm3.png" >
				<div class="btmLogoName">收益中心</div>
			</a>
		</div>
		<div class="btmlogoList">
			<a href="../html/mine.html">
				<img src="../assets/btm4.png" >
				<div class="btmLogoName">我的</div>
			</a>
		</div>
		</div>
	</div>
	<div class="shareLogo">
		<img src="../assets/wallet.png" >
		<div class="shareBox">
			<div>分享赚钱</div>
			<div>￥23.1</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../js/swiper-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
	setTimeout(function(){
		var swiper = new Swiper('.swiper-container', {
		    pagination: '.swiper-pagination',
		    slidesPerView: 1,
		    paginationClickable: true,
		    spaceBetween: 30,
		    loop: true,
			autoplay: 5000,
		});
	},100)
</script>
</html>